<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2023/3/24
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    省份：<select id="provinceId" >
        <option>---请选择省份---</option>
    </select>
    城市：<select id="cityId">
        <option>---请选择城市---</option>
    </select>
    区县：<select id="areaId">
        <option>---请选择区县---</option>
    </select>

    <script>
        $(function() {
            $.post(
                '<%=request.getContextPath()%>/ajax3?method=selectProvince',
                function(jsonObj) {
                    //[{id: 110000, province: '北京市'},{id: 140000, province: '山西省'}]
                    console.log(jsonObj);
                    $(jsonObj).each(function() {
                        //<option value="001">山东省</option>
                        $('#provinceId').append('<option value="'+this.id+'">'+this.province+'</option>')
                    });
                },
                'json'
            );

            //给省份绑定change事件
            $('#provinceId').change(function() {
                $('#cityId option:gt(0)').remove();

                var provinceId = $('#provinceId').val();
                $.post(
                    '<%=request.getContextPath()%>/ajax3?method=selectCity',
                    {'provinceId': provinceId},
                    function(jsonObj) {
                        console.log(jsonObj);
                        $(jsonObj).each(function() {
                            //<option value="001">山东省</option>
                            $('#cityId').append('<option value="'+this.id+'">'+this.city+'</option>')
                        });
                    },
                    'json'
                );
            });

        });
    </script>
</body>
</html>
